<template>
	<view :style="{ height: `${windowHeight}px` }" class="mine-container">
		<view class="customNavBar">
			<view class="navbar">
				<!-- 状态栏 标题栏 合一页面头部-->
				<!-- 状态栏 时间 电量 胶囊-->
				<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
				<!-- 标题栏 -->
				<view :style="{ height: getTitleBarHeight() + 'px' }" class="titleBar">
					<view class="title" style="width: 100%; text-align: center">企业通讯录</view>
				</view>
			</view>
			<!-- 填充区域 -->
			<view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
		</view>
		<view class="uv-empty" v-if="cardData.length === 0">
			<uv-empty mode="list" icon="../../static/images/empty.png"></uv-empty>
		</view>
		<view class="detail-box" v-else>
			<view class="search-box">
				<input placeholder="请输入要搜索的内容" @input="hideKeyboard" v-model="searchData" />
			</view>
			<!--      部门-->
			<view v-for="(item, index) in cardData" :key="index" class="msg-list" @tap="changeItemList(item)"
				v-if="!showPerson">
				<view class="list-left">
					<view class="imageWrapper">
						<image :src="item.imgUrl"></image>
					</view>
					<view class="list-right">
						<view class="msg-type-author">
							<h4>{{ item.label }}</h4>
						</view>
						<text>{{ item.infoMsg }}</text>
					</view>
				</view>
			</view>


			<view v-for="(item, index1) in searchPerson" :key="index1" class="msg-list"
				@tap="copyPhoneNumber(item.phonenumber)" v-else>
				<view class="list-left">
					<view class="imageWrapper">
						<image :src="baseUrl+item.avatar" v-if="item.avatar"></image>
						<image :src="moren" v-else></image>
					</view>
					<view class="list-right">
						<view class="msg-type-author">
							<h4>{{ item.nickName }}</h4>
						</view>
						<text>{{ item.phonenumber }}</text>
					</view>
				</view>
			</view>


		</view>
		<!--    底部占位符-->
		<view class="blank"></view>
		<!-- 自定义 tabBar -->
		<custom-tabbar :currentIndex="4" />
	</view>
</template>

<script setup>
	import CustomTabbar from '@/components/customTabbar/custom-tabbar.vue';
	import {
		defineEmits,
		defineProps,
		ref
	} from 'vue'
	import {
		getDeptTree,
		getWorkApi
	} from '@/api/dep'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 引入自定义头部导航栏相关信息
	import {
		getNavBarHeight,
		getStatusBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js'
	import Folder from '@/static/icon/tongxunlu/companyMoren.png'
	import moren from '@/static/icon/tongxunlu/moren.png'
	import config from '@/config'
	const baseUrl = config.baseUrl
	const currentIndex = ref(4)
	const emit = defineEmits('rightIcon')

	const props = defineProps({
		label: {
			type: String,
			require: true,
		},
		iconFont: {
			type: String,
			default: '',
		},
	})
	const navBack = () => {
		uni.navigateBack()
	}

	const rightIcon = () => {
		emit('rightIcon')
	}

	const windowHeight = uni.getSystemInfoSync().windowHeight - 50

	const cardData = ref([

	])

	const changeItemList = (item) => {
		console.log(item)
		uni.navigateTo({
			url: '/pages/mine/tongxunlu/person?depId=' + encodeURIComponent(item.depId),
		})

		// if(item.children !== undefined){
		//   uni.navigateTo({
		//     url: '/pages/mine/tongxunlu/index2?item=' + encodeURIComponent(JSON.stringify(item)),
		//   })
		// }else{
		//   uni.navigateTo({
		//     url: '/pages/mine/tongxunlu/person?depId=' + encodeURIComponent(item.id),
		//   })
		// }
	}

	const getWorkApiFn = async () => {
		let {
			code,
			data
		} = await getWorkApi()
		if (code === 200) {
			cardData.value = data[0].children.map((v) => {
				return {
					imgUrl: Folder,
					label: v.label,
					depId: v.id,
					children: v.children
				}
			})
		}
	}
	onLoad(() => {
		uni.hideTabBar()
		getWorkApiFn()
	})
	const showPerson = ref(false)
	const searchPerson = ref(null)

	function debounce(func, wait) {
		let timeout;
		return function(...args) {
			const context = this;
			clearTimeout(timeout);
			timeout = setTimeout(() => func.apply(context, args), wait);
		};
	}
	let a = debounce(async function() {
		let params = {
			pageNum: 1,
			pageSize: 10000,
			nickName: searchData.value,
		}
		let {
			code,
			rows
		} = await getDeptTree(params)
		if (code === 200) {
			searchPerson.value = rows
		}
	}, 500)
	const searchData = ref(null)
	const hideKeyboard = () => {
		if (searchData.value) {
			if (searchPerson.value) {
				searchPerson.value = null
			}
			showPerson.value = true
			a()
		} else {
			showPerson.value = false
			getWorkApiFn()
		}
	}
	const copyPhoneNumber = (phoneNumber) => {
		uni.showModal({
			content: '复制手机号码：' + phoneNumber, //模板中提示的内容
			confirmText: '复制内容',
			success: (res) => { //点击复制内容的后调函数
				if (res.confirm) {
					uni.setClipboardData({
						data: phoneNumber, //要被复制的内容
						success: () => { //复制成功的回调函数
							uni.showToast({ //提示
								title: '复制成功'
							})
						}
					});
				}

			}
		})
	}
</script>

<style lang="scss" scoped>
	@import '../../static/style/variables.scss';
	@import '../../static/style/common.scss';
	@import '@/static/style/index.scss';

	.blank {
		height: calc(72rpx + 32rpx + 20rpx);
	}

	.customNavBar {
		.navbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: $z-index;
			background: $box-bg-color-white;
			box-sizing: border-box;
			background-color: #fff;

			.titleBar {
				padding: 0 $edition-pg;
				@include flex($align: center, $justify: space-between);

				.title {
					@include titleStyleBase;
				}
			}
		}
	}

	.title {
		margin-left: 32rpx;
	}

	page {
		//background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.detail-box {
		.search-box {
			width: 100%;
			background: #fff;
			padding: 20rpx 32rpx 32rpx 32rpx;
			margin-bottom: 20rpx;

			input {
				display: flex;
				height: 72rpx;
				padding: 16rpx 24rpx;
				flex-direction: column;
				align-items: flex-start;
				gap: 20rpx;
				border-radius: 8rpx;
				background-color: #F2F3F5;
			}
		}

		.time-box {
			margin: 32rpx 24rpx;
			color: #86909c;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
		}

		.msg-list {
			@include flex($align: center, $justify: space-between);
			background-color: #fff;
			height: 108rpx;
			padding: 0 $spacing-row-base;

			&:active {
				background-color: #eff0f2;
			}

			.list-left {
				@include flex($align: center);

				.imageWrapper {
					@include flex($align: center, $justify: space-between);
					// background-color: #e8f3ff;
					// padding: 10rpx;
					margin-right: 16rpx;
					// border-radius: 32rpx;

				}

				image {
					// width: 42rpx;
					// height: 42rpx;
					// border-radius: 50%;
					width: 64rpx;
					height: 64rpx;
					border-radius: 12rpx;
				}

				.msg-type-author {
					@include flex($align: center);

					h4 {
						margin-right: 16rpx;
						color: #000000;
						font-family: 'PingFang SC';
						font-size: 32rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 44.8rpx;
					}

					p {
						text-align: center;
						font-family: 'PingFang SC';
						font-size: 20rpx;
						font-style: normal;
						font-weight: 500;
						padding: 3rpx 8rpx;
						border-radius: 4rpx;
					}
				}

				text {
					align-self: stretch;
					color: #86909c;
					font-family: 'PingFang SC';
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 33.6rpx;
					margin-top: 8rpx;
				}
			}

			.time-txt {
				color: #86909c;
				text-align: right;
				font-family: 'PingFang SC';
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 39.2rpx;
			}
		}
	}
</style>